<script setup>
import ScaleScreen from '@/components/scale-screen/index.vue'
import PageHeader from '@/components/page-header/index.vue'
import PageFooter from '@/components/page-footer/index.vue'
import Map from '@/components/map/index.vue'
import { ref } from 'vue'
const mapRef = ref(null)
const popupRef = ref(null)
const markerInfo = ref({
  title: '示例标记',
  type: 'type1',
  content: '',
})
const handleOpenPopup = (marker) => {
  if (marker.type === 'type1') {
    return
  } else if (marker.type === 'type2') {
    window.open(marker.content, '_blank')
    return
  } else if (marker.type === 'type3') {
    markerInfo.value.content = `<img src="${'/dev-api' + marker.content}" alt="图片标记" style="width: 100%; height: 400px">`
  } else if (marker.type === 'type4') {
    markerInfo.value.content = `<video src="${'/dev-api' + marker.content}" alt="视频标记" controls style="width: 100%; height: 400px">`
  } else {
    markerInfo.value.content = marker.content
  }
  popupRef.value.open()
}
onMounted(() => {
  setTimeout(() => {
    const mapDiv = document.getElementById('mapDiv')
    const titleDiv = document.getElementById('mapDiv')?.children[0]?.children[0]
    const overlayDiv = mapDiv?.children[0]?.children[2]
    const textDiv = titleDiv?.children[3]
    if (textDiv) {
      const nextSiblingOfTarget = titleDiv.nextElementSibling
      textDiv.parentNode.removeChild(textDiv)
      textDiv.style.zIndex = '1000'
      titleDiv.parentNode.insertBefore(textDiv, nextSiblingOfTarget)
    }
    const allChildren = Array.from(overlayDiv.children) // 将 HTMLCollection 转换为数组
    // 用于存储所有需要移动的 div 元素
    const divsToMove = []
    // 3. 筛选 div 元素
    for (const child of allChildren) {
      // 检查元素的 tagName 是否为 'DIV'
      if (child.tagName === 'DIV') {
        divsToMove.push(child)
      }
    }
    for (const divElement of divsToMove) {
      overlayDiv.parentNode.appendChild(divElement)
    }
  }, 1000)
})
</script>

<template>
  <div id="app">
    <ScaleScreen :width="1920" :height="1080">
      <div class="layout" id="layout">
        <Map class="map" ref="mapRef" @openPopup="handleOpenPopup"></Map>
        <PageHeader />
        <div class="main-content">
          <router-view />
        </div>
        <PageFooter />
      </div>
      <Popup ref="popupRef" type="map" width="480" height="480" :mask="false">
        <div class="content" v-html="markerInfo.content"></div>
      </Popup>
    </ScaleScreen>
  </div>
</template>
<style>
.tdt-label.tdt-clickable {
  pointer-events: none !important;
}
.tdt-label {
  z-index: 1520 !important;
}
</style>
<style lang="scss" scoped>
#app {
  width: 100vw;
  height: 100vh;
  background: radial-gradient(50% 72.29% at 50% 58.98%, #0d1e37 30%, #080e1e 60%, #080e1e 80%);
}
.map {
  position: absolute;
  z-index: -1;
}
.layout {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  pointer-events: none;
  background: url('https://ddns.ideal2077.com:5555/d/Handsomedog/shiliang/mask.png?sign=H68ZoBBfU1th-wQsD_FxUsLFqCtbGzEMqG8x-RMFcLY=:0')
    no-repeat center center;
  background-size: cover;
}
.main-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 24px;
  pointer-events: none;
}
</style>
